2.03. Cookie

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Архитектору Инженеру

В процессе работы сайта используется ещё одна технология – куки (Cookies) – это небольшие текстовые файлы, которые сайт сохраняет в вашем браузере, что позволяет сайтам «узнавать вас». При первом посещении сервер отправляет Set-Cookie, определяя сессию. Браузер сохраняет эти куки, и отправляет их обратно при каждом новом HTTP-запросе. Именно так сервер понимает, что все запросы идут от вашего имени.

Куки — это механизм хранения небольших фрагментов данных на стороне клиента (в браузере), инициируемый сервером. Они позволяют сохранять состояние между HTTP-запросами, несмотря на то, что сам протокол HTTP изначально stateless (без состояния).

То есть:

Открыв сайт, вы встретите технологию входа (авторизацию) – это будет началом сеанса;
Затем вы введёте логин, пароль и отправите на сервер;
Сервер проведёт аутентификацию (проверку) и выдаст «куки» - временные служебные данные, определяющие сессию;
Сессия – тот самый сеанс, период работы пользователя после авторизации, от своего имени;
Браузер сохраняет куки и отправляет их каждый раз, в дополнение к своему запросу;
Если сессия будет завершена (по истечению времени или когда будет команда для завершения – «Выйти»), куки будут уже недействительны;
При попытке продолжения сеанса, сервер будет знать, что эти запросы уже не имеют полномочий, и будет отклонять, требуя авторизации.

Как устроены куки

Каждый раз, когда браузер отправляет HTTP-запрос, он может включить заголовок Cookie: имя=значение; имя2=значение2. Сервер, получив этот заголовок, извлекает данные и применяет логику: «А, это пользователь №12874 — значит, показать ему личный кабинет, а не форму входа».

Куки создаются сервером через HTTP-заголовок Set-Cookie, отправляемый в ответ на запрос:

Set-Cookie: session_id=abc123xyz; Path=/; Domain=example.com; Secure; HttpOnly; SameSite=Lax; Max-Age=3600

Эта строка задаёт не просто имя и значение, а полную политику хранения и использования:

Параметр	Назначение
`session_id=abc123xyz`	Имя и значение куки. Значение обычно — случайно сгенерированный токен, привязанный к сессии на сервере.
`Path=/`	Кука отправляется только при обращении к путям, начинающимся с `/` (то есть ко всему сайту). Если `Path=/admin`, кука уйдёт только при запросах в `/admin/…`.
`Domain=example.com`	Указывает, для каких доменов и поддоменов действует кука. `Domain=.example.com` означает: также `shop.example.com`, `api.example.com`. Без указания — только текущий поддомен.
`Secure`	Кука передаётся только по HTTPS. Без этого флага браузер может отправить куку по незашифрованному HTTP — риск перехвата.
`HttpOnly`	Кука недоступна через JavaScript (`document.cookie`). Защита от XSS (межсайтового скриптинга): даже если на сайте есть уязвимость, злоумышленник не сможет украсть сессионный токен через скрипт.
`SameSite=Lax` или `Strict`	Защита от CSRF (межсайтовой подделки запросов). `Lax` — кука не отправляется при переходе по ссылке с другого сайта (например, из почты), но отправляется при прямом вводе URL или POST-запросах с того же домена. `Strict` — ещё строже: кука не уходит ни при каких межсайтовых переходах.
`Max-Age=3600` или `Expires=Wed, 21 Oct 2025 07:28:00 GMT`	Время жизни куки. `Max-Age` — в секундах от момента установки. `Expires` — абсолютная дата. Если ни один не указан — кука сессионная и удаляется при закрытии браузера.

💡 Все эти параметры задаёт сервер. Браузер не интерпретирует содержимое куки — он просто хранит строку и отправляет её при соблюдении условий.

Где хранятся куки?

В браузере — в зашифрованной базе данных (Chrome — LevelDB, Firefox — SQLite).
На диске — как часть профиля пользователя (папка User Data/Default/Cookies в Google Chrome).
В памяти — сессионные куки хранятся только в RAM и исчезают после завершения процесса браузера.

Куки не являются исполняемыми файлами. Это простой текст (в кодировке URL-safe Base64 или plain ASCII), который не может повредить систему сам по себе. Опасность — в данных, которые они содержат, и в том, как их используют.

Основные цели использования кук

Аутентификация и сессии
После ввода логина и пароля сервер создаёт сессию (часто — запись в базе: ID, пользователь, дата, IP, user-agent) и отправляет клиенту session_id. Все последующие запросы с этим session_id считаются действиями авторизованного пользователя.
Персонализация
Язык интерфейса, тема оформления, регион — всё это можно сохранить в куках, чтобы не спрашивать при каждом посещении.
Аналитика и метрики
Сервисы вроде Яндекс.Метрики или Google Analytics устанавливают куки для отслеживания уникальных посетителей, путей навигации, времени на сайте.
Реклама и таргетинг
Трекеры (например, doubleclick.net) ставят куки для построения профиля интересов. На основе этого профиля показываются релевантные объявления на других сайтах.
Корзина и промежуточные состояния
Товары в корзине, заполненные поля формы — часто хранятся во временных куках, пока пользователь не завершит заказ.

Виды кук

Куки бывают сессионные и постоянные, которые могут храниться месяцы и годы («Запомнить меня»).

Тип	Жизненный цикл	Где хранится	Пример использования
Сессионные	До закрытия браузера (или вкладки, в зависимости от настроек)	Только в оперативной памяти	Сессия входа в банк: после закрытия — автоматический выход
Постоянные (persistent)	До истечения `Max-Age` или `Expires` (дни, месяцы, годы)	На диске, в профиле браузера	«Запомнить меня» при входе в почту
Первые (first-party)	Устанавливаются доменом, на котором находится пользователь	В рамках текущего домена	`session_id` на `vk.com`
Сторонние (third-party)	Устанавливаются доменом, отличным от текущего (через iframe, скрипты, изображения)	В рамках стороннего домена	Куки аналитики от `mc.yandex.ru`, рекламы от `googleads.g.doubleclick.net`

Современные браузеры усиливают контроль над сторонними куками:

Safari блокирует их по умолчанию (ITP — Intelligent Tracking Prevention).
Chrome с 2024 года постепенно отказывается от поддержки third-party cookies (Privacy Sandbox).
Firefox применяет усиленную изоляцию (partitioned cookies) — куки одного домена не работают в контексте другого.

Как посмотреть и управлять куками

В Chrome / Edge / Brave:

Открыть DevTools (F12 или Ctrl+Shift+I).
Вкладка Application → Storage → Cookies.
Выбрать домен — увидеть список кук, их параметры, изменить или удалить.

Вручную (для обучения):
Можно создать куку через JavaScript в консоли:

document.cookie = "test=hello; Max-Age=60; Path=/";

Но только если сайт не установил флаг HttpOnly — иначе доступ запрещён.

Через настройки браузера:

Chrome: Настройки → Конфиденциальность и безопасность → Файлы cookie и данные сайтов.
Здесь можно:
— очистить всё,
— заблокировать third-party куки,
— посмотреть список сайтов с сохранёнными куками,
— задать исключения («Разрешить для этих сайтов»).

Кеширование

Есть ещё одна технология, которую чуть ранее мы уже затрагивали – кеширование. Это использование хранилища, которое позволит не отправлять запросы за вспомогательными элементами каждый раз.

Кеширование — это стратегия временного хранения ресурсов (HTML, CSS, JS, изображения, шрифты, API-ответы) локально — на устройстве пользователя — с целью сократить количество сетевых запросов и ускорить повторные посещения.

Допустим, действительно, зачем каждый раз скачивать одно и то же изображение, если вы его уже на компьютер скачали? Ведь можно отображать его же? Так и работает механизм кеша в браузере.

Если данные не изменились, браузер берёт HTML, CSS, JS, изображения и прочую информацию из локального кеша. К кешу относятся и DNS-записи, чтобы и IP каждый раз не запрашивать.

Файлы имеют свой хеш (мы это помним с прошлых глав), и браузер проверяет хеш каждого файла, чтобы убедиться, совпадает ли он. Если совпадает – обновление не требуется, и всё работает быстрее. Пример – при повторном посещении сайта CSS и шрифты грузятся мгновенно – они уже в кеше.

Работает на нескольких уровнях:

1. Кеш браузера (HTTP-кеширование)

Когда сервер отдаёт ресурс, он может приложить заголовки, управляющие кешированием:

Заголовок	Пример	Действие
`Cache-Control`	`max-age=86400`	Ресурс можно использовать из кеша 1 день без проверки на сервере.
`Cache-Control`	`no-cache`	Кеш можно использовать, но обязательно проверить актуальность через `ETag` или `Last-Modified`.
`Cache-Control`	`no-store`	Никакого кеширования — каждый раз запрашивать с сервера (например, для личных данных).
`ETag`	`ETag: "abc123"`	Уникальный хеш содержимого. При повторном запросе браузер шлёт `If-None-Match: "abc123"`. Если ресурс не изменился — сервер отвечает `304 Not Modified`, и браузер берёт данные из кеша.
`Last-Modified`	`Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT`	Альтернатива `ETag`. Браузер шлёт `If-Modified-Since`, сервер сравнивает даты.

🔍 ETag точнее: он реагирует на любые изменения содержимого. Last-Modified — только на изменение даты файла, что может не совпадать с реальным обновлением (например, при сборке проекта).

2. DNS-кеширование

Как описано в главе о DNS, результаты разрешения имён тоже кешируются:
— в ОС,
— в роутере,
— на рекурсивных резолверах.
Это сокращает задержку при первом запросе к домену.

3. Service Workers (кеширование на уровне приложения)

Современные сайты (PWA — Progressive Web Apps) используют JavaScript-воркеров, которые перехватывают сетевые запросы и управляют кешем вручную через API CacheStorage. Это позволяет:

работать в оффлайне,
кешировать динамические API-ответы,
реализовывать стратегии типа «сначала кеш, потом сеть».

4. CDN-кеширование

Content Delivery Network (например, Cloudflare, Akamai) хранит копии статических ресурсов на серверах по всему миру. Пользователь получает файл не с основного хостинга, а с ближайшего CDN-узла — это снижает задержку и нагрузку на сервер.

Жизненный цикл кеша

Первый запрос → ресурс загружается с сервера, сохраняется в кеш браузера.
Повторный запрос → браузер проверяет политику:
- если max-age не истёк — берёт из кеша,
- если нужно — отправляет условный запрос (304),
- если no-store — всегда идёт на сервер.
Очистка → при достижении лимита диска браузер удаляет самые старые записи (LRU — Least Recently Used). Пользователь может очистить кеш вручную.

Как управлять кешем как разработчик

Используйте хеширование имён файлов: main.a1b2c3.js вместо main.js. При изменении содержимого меняется хеш → браузер скачает новую версию.
Устанавливайте разные политики для разных ресурсов:
— max-age=31536000 для хешированных статических файлов (изображения, шрифты),
— no-cache для index.html,
— no-store для /api/user/profile.
Проверяйте поведение через DevTools:
Вкладка Network → столбец Size показывает (memory cache), (disk cache), или реальный размер загрузки.

Пользовательский контроль

Ctrl+F5 / Cmd+Shift+R — жёсткая перезагрузка: игнорировать кеш, запросить всё заново.
DevTools → Network → Disable cache — отключить кеширование во время отладки.
Настройки → Конфиденциальность → Очистить историю — удалить кеш, куки, данные сайтов.

Cookie​

Что такое Cookie?​

Как устроены куки​

Где хранятся куки?​

Основные цели использования кук​

Виды кук​

Как посмотреть и управлять куками​

Кеширование​

1. Кеш браузера (HTTP-кеширование)​

2. DNS-кеширование​

3. Service Workers (кеширование на уровне приложения)​

4. CDN-кеширование​

Жизненный цикл кеша​

Как управлять кешем как разработчик​

Пользовательский контроль​

Cookie

Что такое Cookie?